<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link href="/home/css/bootstrap.css" rel="stylesheet" charset="utf-8">     
		<link href="/home/css/bootstrap-responsive.css" rel="stylesheet" charset="utf-8"> 
 		<link href="/home/css/fsgallery.css" rel="stylesheet" charset="utf-8">    
 		<script src="/home/js/jquery.min.js" charset="utf-8"></script>
		<script src="/home/js/fs_forse.js" charset="utf-8"></script> 
	</head>
	<style type="text/css">
		body {
			/*background: #000;*/
			background-image: linear-gradient(to right,#6e5f73,#B59BBE);
		}
		
		#sortable .file_p img{
			width: 230px;
			border: 3px solid #ccc;
			box-sizing: border-box;
		}		
		
		.file_p {			
			width: 230px;
		}
		
		#sortable .file_p .aaa{
			display: block;
			width: 230px;
			height: 25px;
			text-decoration: none;
			text-align: center;
			color: #333;
			font-weight: bold;
		}
		#sortable .file_p .aaa:link{
			color: #333;
		}
		
		/*#sortable .file_p img:after {
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%,-50%);
		}*/
		
	</style>

	<body>
			<div class="rimg">
				<div class="gallery" id="tiless" role="tiless">
					<div class="thumbnails" id="gallery">
						<div id="sortable">
						
						@foreach($data as $val)
						<div class="file_p span3">
							<a href="{{$val->src}}">
							<img src="{{$val->src}}" title="{{$val->list_name}}"/>
							</a>
							<a href="{{$val->content}}" class="aaa">{{$val->list_name}}</a>
						</div>
						@endforeach
						
					</div>
					</div>
				</div>
			</div>
			<script src="/home/js/freewall.js" type="text/javascript" charset="utf-8"></script>
			<script src="/home/js/jquery.wookmark.js" type="text/javascript" charset="utf-8"></script>
			<script src="/home/js/jquery.imagesloaded.js" type="text/javascript" charset="utf-8"></script>
			<script src="/home/js/jquery-ui.min.js"></script>
			<script src="/home/js/jquery.shapeshift.js" type="text/javascript" charset="utf-8"></script>
			<script type="text/javascript">
				
				//拖拽插件调用
				$(document).ready(function() {
						$("#sortable").shapeshift();
				})
				//瀑布流插件调用
			function waterfall() {
				var handler = $('.rimg #sortable>div');
				handler.wookmark({
					// Prepare layout options.
					autoResize: true, // This will auto-update the layout when the browser window is resized.
					container: $('#tiless #sortable'), // Optional, used for some extra CSS styling
					offset: 5, // Optional, the distance between grid items
					outerOffset: 10, // Optional, the distance to the containers border
					itemWidth: 240 // Optional, the width of a grid item
				});
			}
			$('.rimg #sortable').imagesLoaded(waterfall);
			</script>
	</body>

</html>